<template>
    <div class="my-container w-full h-full">
        <div class="top h-1/6">
            <div class="back" @click="$router.push('/')">
                <img class="w-8 lg:w-12 xl:w-[3vw] ml-4 shrink-0 object-contain cursor-pointer" src="/images/backIcon2.png"
                    alt="" @click="back" />
                <span class="shrink-0 ml-2 lg:text-3xl xl:text-[2vw] xl:ml-4 cursor-pointer">返回</span>
            </div>
            <h2 class="text-2xl lg:text-[4vw] xl:text-[3vw] font-bold">症状问诊</h2>
        </div>
        <div class="h-5/6 px-8">
            <h2 class="text-lg lg:text-2xl">您是否有如下的症状？(多选)</h2>
            <div class="flex flex-wrap text-xl lg:text-2xl mt-4">
                <div class="w-1/4 py-2 lg:py-4 flex items-center " v-for="name of names" :key="name.id">
                    <input class="w-4 h-4 lg:w-6 lg:h-6 cursor-pointer" type="checkbox" :id="name.id" :name="name.name" :value="name.id" v-model="ids"  />
                    <label class="ml-2 cursor-pointer" :for="name.id">{{ name.name }}</label>
                </div>
            </div>
            <div class="flex justify-center mt-8 lg:mt-16">
                <button class="w-[200px] lg:w-[300px] lg:h-[70px]  my-btn h-[50px] text-xl lg:text-2xl"  @click="setBingshi" >提交</button>
            </div>
        </div>
       
        <MyAlert ref="myAlert" />
    </div>
</template>

<script setup>
import { ref, computed ,onMounted} from "vue";
import { useRouter } from "vue-router";
import MyAlert from "@/components/alert/index.vue";
import { fetchListBingshi, fetchSetBingshi,fetchSetWenzhenMore,fetchListWenzhenMore } from "@/assets/api/index.js";
const baseUrl = import.meta.env.BASE_URL

const router = useRouter();
const myAlert = ref();

const id = ref(0);
const names = ref([]);
const ids = ref([]);

const getBingshi = async () => {
    let res = await fetchListWenzhenMore({});
    if (!res) {
        return;
    }
    setTimeout(()=>{
        let audio = document.getElementById("myAudio");
                audio.src = baseUrl + '/sources/wenzhen_action_2.mp3'
                audio.muted = false;
                audio.play();
    },200)
    names.value = res.data;
};

const setBingshi = async () => {
    // return console.log(ids.value)
    let res = await fetchSetWenzhenMore({
        ids: ids.value,
    });
    if (res.code !== 0) {
        myAlert.value.showAlert(res.message)
        return;
    }
    setTimeout(()=>{
        let audio = document.getElementById("myAudio");
                audio.src = baseUrl + '/sources/wenzhen_complate.mp3'
                audio.muted = false;
                audio.play();
    },200)
    router.push('/')
};

const add = (id) => {
    ids.push(id);
    console.log(ids)
};

onMounted(()=>{
    getBingshi()
})
</script>

<style scoped>
.my-container .top {
    width: 100%;
    height: 15%;
    /* background: white; */
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* color: white; */
}

.top .back {
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.top .back img {
    width: min(4vw, 40px);
    margin: 0 5px;
    margin-left: 20px;
}

.back span {
    font-size: min(3vw, 30px);
}

.top h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: min(4vw, 40px);
}

.my-btn {
    cursor: pointer;

    background: linear-gradient(to right, rgb(19, 167, 255), rgb(14, 143, 255));
    /* background: blue; */
    border-radius: 200px;
    border: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;
}
</style>
